<template>
  <div>
    <Card>
      <Tabs :animated="false">
        <TabPane :label="superviseLabel">
          <supervise :payWayList=payWayList @resetBadge="resetBadge($event)"></supervise>
        </TabPane>
        <TabPane :label="chargeLabel">
          <charge :payWayList=payWayList @resetBadge="resetBadge($event)"></charge>
        </TabPane>
        <TabPane :label="invalidLabel">
          <disabled :payWayList=payWayList></disabled>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import superviseContent from "./supervise";
import chargeContent from "./charge";
import disabledContent from "./disabled";

export default {
  components: {
    supervise: superviseContent,
    charge: chargeContent,
    disabled: disabledContent
  },
  data() {
    return {
      superviseLabel: h => {
        return h("div", [
          h("span", "督导件"),
          h("Badge", {
            props: {
              count: this.superviseCount,
              "overflow-count": 9999999999999999999
            }
          })
        ]);
      },
      chargeLabel: h => {
        return h("div", [
          h("span", "收费件"),
          h("Badge", {
            props: {
              count: this.chargeCount,
              "overflow-count": 9999999999999999999
            }
          })
        ]);
      },
      invalidLabel: h => {
        return h("div", [
          h("span", "失效件"),
          h("Badge", {
            props: {
              count: this.invalidCount,
              "overflow-count": 9999999999999999999
            }
          })
        ]);
      },
      superviseCount: 0,
      chargeCount: 0,
      invalidCount: 0,
      payWayList: '',
    };
  },
  methods: {
    // 失效件查询
    disabledQuery() {
      let obj = {};
      this.api.disabledQuery(obj).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data;
          dataSource.forEach(element => {
            if (element.type == "1") {
              this.onJobData.push(element);
            }
            if (element.type == "2") {
              this.orphanData.push(element);
            } else {
              this.otherData.push(element);
            }
          });
        }
      });
    },
    // 初始化badge
    initial() {
      let obj = {
        index: 1,
        pageSize: 10,
        initflag: 0,
        selecttype: 0
      };
      this.api.getlist(obj).then(res => {
        res.data.professionContNums = {
          "contnumsforSupervisor": 10,
          "contnumsforOrphan": 7,
          "contnumsforInvalid": 10
        }
        if (res.code == 200 && res.data != null) {
          if (res.data.professionContNums != null) {
            this.superviseCount =
              res.data.professionContNums.contnumsforSupervisor;
            this.chargeCount = res.data.professionContNums.contnumsforOrphan;
            this.invalidCount = res.data.professionContNums.contnumsforInvalid;
          }
        } else {
          this.$Message.info(res.msg);
        }
      });
      //交费方式下拉
      let obj1 = {
        index: 1,
        initflag: 0,
        pageSize: 10,
        selecttag: 0, // 0是查全部
        selecttype: 0,
        premorder: 0,
        paytodateorder: 0
      };
      this.api.getWorkListForSupervisor(obj1).then((res) => {
        console.log(res.data.basemap.payintvs, '交费方式');
        this.payWayList = res.data.basemap.payintvs
      })
    },
    // 重新设置badge
    resetBadge() {
      this.initial();
    }
  },
  watch: {},
  mounted() {
    // 页面初始化badge
    this.initial();
  },
  computed: {},
  created() { },
  beforeDestroy() {
    this.superviseLabel = null;
    this.chargeLabel = null;
    this.invalidLabel = null;
    this.superviseCount = null;
    this.chargeCount = null;
    this.invalidCount = null;
  }
};
</script>

<style lang="less" scoped></style>

<style scoped></style>

